<template>
  <div class="properties-panel-container">
    <h2>{{ elementType }}</h2>
    <div class="properties-panel-content">
      <c-common-properties :bpmnElement="bpmnElement" v-if="showCommon"></c-common-properties>
      <component :is="curCmp" :bpmnElement="bpmnElement" ref="propertiesCmp"></component>
    </div>
  </div>
</template>

<script>
import {shallowRef} from "vue";
import {getBusinessObject} from "bpmn-js/lib/util/ModelUtil";
import UserTaskHOC from "./components/generalFormComponents/userTaskComponents/UserTaskHOC";
import CommonProperties from "./components/generalFormComponents/CommonProperties";
import bpmnPropertiesMap from "./components/generalFormComponents/bpmnPropertiesMap";

export default {
  name: "CustomerPropertiesPanel",
  components: {
    "c-common-properties": UserTaskHOC(CommonProperties)
  },
  props: {
    bpmnElement: {
      type: Object
    }
  },
  inject: ["modelerObj"],
  data() {
    return {
      elementType: "",
      showCommon: false
    }
  },
  setup(){
    const curCmp = shallowRef(null);
    return {
      curCmp
    }
  },
  methods: {
  },
  watch: {
    "bpmnElement": function (val) {
      if (val?.type) {
        this.showCommon = val.type !== "bpmn:Process";
        let path = val.type.replace("bpmn:", "Properties_");
        if (path) {
          const elementType = this.bpmnElement ? getBusinessObject(val)?.$type : "";
          this.elementType = this.modelerObj.modeler.get("translate")(elementType.replace(/^bpmn:/, ''))
          path = path.replace(/(?<=Properties_).*(?=Gateway)/, "");
          this.curCmp = UserTaskHOC(bpmnPropertiesMap[path]);
          return;
        }
      }
      this.curCmp = null;
    }
  }
}
</script>

<style scoped lang="scss">
.properties-panel-container {
  height: 100%;
  @include flex-style(flex, auto, column);
  h2 {
    padding: 10px 5px;
    background: #ccc;
    margin: 0;
  }
  .properties-panel-content{
    padding: 5px;
    overflow: auto;
  }
  .el-tabs {
    height: calc(100% - 44px);
    // @include flex-style(flex, auto, column);
    :deep(.el-tabs__content) {
      flex: auto;
      overflow: auto;
    }
  }
}
</style>